<template>
	<page-meta class="page" :style="{ 'min-height': (h) + 'px' }"
		:page-style="'overflow:' + (showPcList ? 'hidden' : 'visible')">
		<view class="sh" @click="toHref('/pagesTrip/fishJiale2/details')">
			<u-icon name="arrow-right" color="#AAAAAA" size="26" label="商户详情" label-color="#014AD4" label-size="26"
				label-pos="left"></u-icon>
		</view>
		<customNavBar1 title="渔家乐"></customNavBar1>
		<view class="cll_lb">
			<swiper class="swiper" :autoplay="true" :interval="8000" :circular="true" :duration="200"
				style="height: 800rpx;">
				<swiper-item class="swiper-items" v-for="item, index in coverImg" :key="index" @tap="turnLinkUri(item.linkUri)">
					<image class="image" style="width: 100%; height: 100%;" :src="item.path" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="xstm" v-if="specialPrices.length > 0">
			<image class="tit" :src="mrtj"></image>
			<view class="robTime">
				<text>{{ specialPrices[0].robTime.split(':')[0] }}</text>:
				<text>{{ specialPrices[0].robTime.split(':')[1] }}</text>开抢
			</view>
			<u-scroll-list :indicator="false">
				<view class="times">
					<text v-for="(time, index) in playTimeArr" :key="index" @click="timeIndex = time"
						:class="timeIndex == time ? 'on' : ''">明日{{ time }}游玩</text>
				</view>
			</u-scroll-list>
			<u-scroll-list :indicator="specialPricesJson[timeIndex].length > 1 ? true : false">
				<view class="scroll-list">
					<view class="list scroll-list__goods-item" v-for="(item, index) in specialPricesJson[timeIndex]"
						:key="index">

						<view class="card" @click="tJ(item)">
							<view class="card_pic">
								<image :src="xstm" class="xstmIcon"></image>
								<image :src="item.coverImg || pc" mode="" class="goods"></image>
							</view>
							<view class="card_text">
								<!-- 票名 -->
								<view class="goodsName">
									<text class="nameGoods">{{ item.goodsName }}</text>
								</view>
								<!--  -->
								<view class="sc">出海时长：约{{ item.playLength }}小时</view>
								<!-- 小标签 -->
								<view class="titleFlag">
									<text class="flagText">{{ item.featureLabels }}</text>
								</view>
								<view class="price">
									<view class="price_left">
										<text class="rmb">￥</text>
										<text class="now_price">{{ item.discountPrice }}</text>
										<text class="bottom_price">/艘</text>
									</view>
								</view>
								<!-- 进度 -->
								<view class="jd" :class="item.residueNum == 0 ? 'noNum' : ''">
									<u-line-progress
										:percentage="(parseFloat((item.initNum - item.residueNum) / item.initNum).toFixed(2) * 100)"
										inactiveColor="#FECED2" :showText="false"
										activeColor="#FF1851"></u-line-progress>
									<text>仅剩{{ item.residueNum || 0 }}份</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-scroll-list>
		</view>
		<view class="listsContent">
			<view class="tabs">
				<text :class="tabIndex == 0 ? 'on' : ''" @click="tabIndex = 0">包船</text>
				<text :class="tabIndex == 1 ? 'on' : ''" @click="tabIndex = 1;">拼船</text>
			</view>
			<view style="padding-bottom:1px" v-if="tabIndex == 0">
				<view class="list" v-for="(item, index) in buyBoat" :key="index">
					<view class="card">
						<view class="card_pic">
							<image :src="item.coverImg || pc" mode="" class="goods"></image>
						</view>
						<view class="card_text">
							<!-- 票名 -->
							<view class="goodsName">
								<text class="nameGoods">{{ item.goodsName }}</text>
							</view>
							<!-- 包船 -->
							<view class="sc">出海时长：约{{ item.playLength }}小时</view>
							<view class="titleFlag">
								<text class="flagText">{{ item.featureLabels || '' }}</text>
							</view>
							<!-- 价格&预定 -->
							<view class="price mt">
								<view class="price_left">
									<text class="rmb">￥</text>
									<text class="now_price">{{ item.normalPrice }}</text>
									<text class="bottom_price">/艘</text>
								</view>
								<view class="price_right" @click="
									toHref('/pagesTrip/fishJiale2/goodDetail?id=' + item.id + '&goodsType=' + item.goodsType)">
									<text class="before_buy">预订</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<nodata class="scenspots " v-if="buyBoat.length == 0"></nodata>
			</view>
			<!-- 拼船列表 -->
			<view style="padding-bottom:1px" v-if="tabIndex == 1">

				<view class="pop_list">
					<view class="pop_left"
						@click="toHref('/pagesTrip/fishJiale2/pcList?data=' + JSON.stringify(joinBoat))">
						<view class="pop_title">
							去拼船
						</view>
						<view class="pop_text">
							点击拼船 >
						</view>
					</view>
					<view class="pop_right" @tap="showPcList = true">
						<view class="pop_title">
							发布拼船
						</view>
						<view class="pop_text">
							点击发布 >
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 行程亮点 -->
		<view class="xcld" v-if="xcld">
			<image :src="xcld" mode="widthFix"></image>
		</view>
		<!-- 我要发起拼船选择类型 -->
		<u-popup :show="showPcList" @close="showPcList = false">
			<view class="picListType">
				<view class="title">
					<text>选择类型</text>
					<image src="@/static/index/steamerTicket/icon_close.png" @tap="showPcList = false"
						style="right:40rpx">
					</image>
				</view>

				<view class="list" v-for="(item, index) in buyBoat" :key="index">
					<view class="card">
						<view class="card_pic">
							<image :src="item.coverImg || pc" mode="" class="goods"></image>
						</view>
						<view class="card_text">
							<!-- 票名 -->
							<view class="goodsName">
								<text class="nameGoods">{{ item.goodsName }}</text>
							</view>
							<!-- 包船 -->
							<view class="sc">出海时长：约{{ item.playLength }}小时</view>
							<view class="titleFlag">
								<text class="flagText">{{ item.featureLabels || '' }}</text>
							</view>
							<!-- 价格&预定 -->
							<view class="price mt">
								<view class="price_left">
									<text class="rmb">￥</text>
									<text class="now_price">{{ item.normalPrice }}</text>
									<text class="bottom_price">/艘</text>
								</view>
								<view class="price_right" @click="
									toHref('/pagesTrip/fishJiale2/goodDetail?isMy=1&id=' + item.id + '&goodsType=' + item.goodsType)">
									<text class="before_buy">发起拼船</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</page-meta>
</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	import nodata from '@/compoments/NoData/index1.vue'
	import customNavBar1 from '@/compoments/uNavBar1'
	export default {
		components: {
			nodata,
			customNavBar1,
			GetPhoneNumber
		},
		data() {
			return {
				timeIndex: '',
				playTimeArr: [],
				specialPricesJson: {},
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				data: [],
				buyBoat: [],
				joinBoat: [],
				specialPrices: [],
				coverImg: [{
					path: 'https://fsy.shengsi.gov.cn/file/20240730/ff9a3fb2e3544540be633e4ca86238f0.png',
					route:''
				}],
				tabIndex: 0,
				refresh: false,
				openId: '',
				showPcList: false,
				q: 'https://i.ringzle.com/file/20240312/f54931dedf0242f88f87094a454b0464.png', //抢票
				pc: 'https://i.ringzle.com/file/20240312/c8fc560cae334d66842c3189f2fce39c.png', //我要拼船
				mrtj: 'https://i.ringzle.com/file/20240312/c32fdd323cb24cfaa91e8cbcccaba371.png', //每日特价
				xstm: 'https://i.ringzle.com/file/20240312/a8b49bb05efb4613a2f89495f7ebc290.png', //限时特卖
				sd: 'https://i.ringzle.com/file/20240312/675993e0afb646f395cf759ae06b9151.png', //闪电
				xcld: '' ,//行程亮点
				pageTitle:'渔家乐'
				
			};
		},
		onLoad() {
			this.getBannerImg();
			this.getHaiBao();
			this.getData();
		},
		methods: {
			loginSuccess() {
				this.refresh = true;
				this.openId = JSON.parse(uni.getStorageSync('userInfo')).openId;
				this.getData();
			},
			tJ(item) {
				if (item.residueNum > 0) {
					this.toHref('/pagesTrip/fishJiale2/goodDetail?id=' + item.id + '&goodsType=' + item.goodsType +
						'&robTime=' + item.robTime + '&playDate=' + item.playDate)
				}
			},
			getBannerImg() {
				this.$api.get('/sys/isappletpic/queryBannerByType/23').then(res => {
					if (res.data.code == 0) {
						if(res.data.data.bannerList.length>0)
							this.coverImg = res.data.data.bannerList;
					}
				})
			},
			getHaiBao(){
				this.$api.get('/sys/isappletpic/queryBannerByType/28').then(res => {
					if (res.data.code == 0) {
						if(res.data.data.bannerList.length>0)
							this.xcld = res.data.data.bannerList[0].path;
					}
				})
			},
			turnLinkUri(url){
				if(url) uni.navigateTo({url})
			},
			getData() {
				this.$api
					.get("/scenic/api/goods/queryGoodsList/1748948099092451329")
					.then((res) => {
						if (res.data.code === 0) {
							this.buyBoat = res.data.data.buyBoat || []; //包船
							this.specialPrices = res.data.data.specialPrice || []; //特价
							this.joinBoat = res.data.data.joinBoat || []; //拼船
							if (this.refresh) {
								this.$nextTick(() => {
									this.$forceUpdate();
								})
							}
							//处理
							let specialPricesJson = {};
							this.specialPrices.forEach((item, index) => {
								if (specialPricesJson[item.playTime]) {
									specialPricesJson[item.playTime].push(item)
								} else {
									specialPricesJson[item.playTime] = [item];
									this.playTimeArr.push(item.playTime);
								}
							})

							this.specialPricesJson = specialPricesJson;
							this.timeIndex = this.playTimeArr[0];
						} else this.$showModal(res.data.msg);
					});
			},
			toHref(url) {
				if (url == '/pagesTrip/fishJiale2/details') {
					return uni.navigateTo({
						url
					});
				}
				this.$login().then(res => {
					if (res === 0) {
						this.openId = JSON.parse(uni.getStorageSync('userInfo')).openId;
						uni.navigateTo({
							url: url,
						});
					} else this.$refs['phoneNumber'].show = true;
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.robTime {
		position: absolute;
		right: 20rpx;
		top: 32rpx;
		z-index: 10;
		font-size: 32rpx;
		color: #FF4141;
		font-weight: bold;

		text {
			display: inline-block;
			width: 56rpx;
			height: 56rpx;
			text-align: center;
			line-height: 56rpx;
			background-color: #FF4141;
			color: #fff;
			border-radius: 12rpx;
			margin: 0 6rpx;
		}
	}

	.sh {
		position: absolute;
		right: 0;
		top: 600rpx;
		width: 190rpx;
		height: 74rpx;
		background: url('https://i.ringzle.com/file/20240312/2bc9dd6e274343d2bbbe2f5eeb98a4ae.png') no-repeat center;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 11;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.xstm {
		width: 710rpx;
		min-height: 530rpx;
		padding: 40rpx 0 0 0;
		box-sizing: border-box;
		border-radius: 24rpx;
		margin: -36rpx auto 0;
		background: url('https://i.ringzle.com/file/20240312/4d5cbcf813024eaab57df1a76974abb9.png') no-repeat center;
		background-size: 100% 100%;
		position: relative;
		z-index: 10;

		.tit {
			width: 244rpx;
			height: 36rpx;
			margin-left: 24rpx;
		}

		.times {
			margin: 32rpx 0 22rpx;
			display: flex;
			gap: 0 20rpx;
			padding: 0 24rpx;
			flex-wrap: nowrap;

			text {
				display: inline-block;
				height: 64rpx;
				color: #999;
				font-size: 28rpx;
				border-radius: 32rpx;
				background-color: #fff;
				border: 1rpx solid #fff;
				width: 226rpx;
				min-width: 226rpx;
				text-align: center;
				line-height: 64rpx;

				&.on {
					border: 1rpx solid #FF4141;
					color: #FE1D29;
				}
			}
		}
	}

	.xcld {
		margin-top: 28rpx;
		padding: 0 24rpx;

		image {
			width: 100%;
		}
	}

	.picListType {
		padding: 40rpx 0 0;
		height: 720rpx;
		overflow-y: auto;

		.title {
			position: relative;
			text-align: center;
			margin-bottom: 52rpx;
			padding: 0 40rpx;

			text {
				font-size: 36rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #333333;
			}

			image {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: 10rpx;
				top: 50%;
				margin-top: -18rpx;
			}
		}
	}

	.lookMore {
		height: 68rpx;
		border-radius: 24rpx;
		background-color: #F6F6F6;
		color: #666;
		line-height: 68rpx;
		font-size: 28rpx;
		text-align: center;
		margin: 0 28rpx 30rpx 28rpx;
	}

	.listsContent {
		width: 710rpx;
		background: #fff;
		border-radius: 16rpx;
		margin: 20rpx auto 0;
		position: relative;

		.pc {
			position: fixed;
			top: 950rpx;
			right: 0;
			width: 160rpx;
			height: 188rpx;
			z-index: 99;
		}

		.pop_list {
			display: flex;
			justify-content: space-between;
			padding: 32rpx 20rpx 55rpx;

			.pop_title {
				margin: 0 16rpx;
				padding: 36rpx 22rpx 0;
				box-sizing: border-box;
				font-size: 36rpx;
				color: #111111;
				font-weight: bold;

			}

			.pop_text {
				margin: 20rpx 16rpx;
				padding: 0 22rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				color: #666;
				font-weight: Regular;
			}

			.pop_left {
				background: url('https://i.ringzle.com/file/20240319/ce6bd80d84224b619272804f8cf0e78e.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin: 0 11rpx;
				width: 100%;
				height: 156rpx;

			}

			.pop_right {
				background: url('https://i.ringzle.com/file/20240319/672fa5f93b2b43378a6abf2b701a1674.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin: 0 11rpx;
				width: 100%;
				height: 156rpx;
			}
		}

	}

	.tabs {
		padding: 32rpx 0 22rpx 0;

		text {
			display: inline-block;
			position: relative;
			text-align: center;
			width: 50%;
			font-size: 36rpx;
			color: #666;
			padding-bottom: 10px;
			padding-left: 12px;
			box-sizing: border-box;

			&.on {
				background: url('https://i.ringzle.com/file/20240312/3caf932b50d743519b40f9395c47fff9.png') no-repeat center 20rpx;
				background-size: 40% 60%;
				color: #111;
				font-weight: bold;
			}
		}
	}

	page,
	.page {
		background-color: #D6EDFC;


	}

	.banner {
		width: 100%;
		height: 274rpx;
	}

	.jd_sticky {
		position: sticky;
		z-index: 999;
	}

	.searchCondition {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		padding: 22rpx 0;

		.item {
			margin: 0 40rpx;

			&>view {
				display: flex;
				line-height: 37rpx;
				align-items: center;

				text {
					font-size: 26rpx;
					color: #666;
				}

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}

			.u-icon {
				justify-content: center;
			}
		}

	}

	.u-scroll-list {
		padding-bottom: 10rpx;
	}

	.scroll-list {
		display: flex;
		width: 100%;

		.sc {
			margin: 10rpx 0 14rpx !important;
		}

		.card {
			margin-bottom: 0 !important;
		}

		.list {
			width: 100%;
			min-width: 100%;
		}

		/deep/.u-scroll-list__indicator {
			margin-top: 16rpx;
		}
	}

	.card {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		padding: 0 24rpx;
		position: relative;

		.me {
			width: 98rpx;
			height: 34rpx;
			border-radius: 16rpx 0 18rpx 0;
			background-color: #FEB000;
			color: #fff;
			font-size: 20rpx;
			line-height: 34rpx;
			left: 25rpx;
			top: 0rpx;
			z-index: 99;
			position: absolute;
			text-align: center;
		}

		.card_pic {
			width: 220rpx;
			min-width: 220rpx;
			height: 256rpx;
			position: relative;

			.xstmIcon {
				width: 82rpx;
				height: 74rpx;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}

			.goods {
				border-radius: 10rpx;
				width: 100%;
				height: 100%;
			}
		}

		.card_text {
			margin-left: 20rpx;
			width: 200rpx;
			flex: 1;
		}

		.nameGoods {
			font-size: 36rpx;
			font-weight: 700;
			width: 220px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: inline-block;
			line-height: 36rpx;
		}

		.sc {
			margin: 20rpx 0;
			font-size: 26rp;
			color: #777;
		}

		.titleFlag {
			margin-bottom: 10rpx;
			//display: flex;
		}

		.flagText {
			font-size: 22rpx;
			border-radius: 4rpx;
			padding: 6rpx 8rpx;
			color: #597BA9;
			background: #F5F8FA;
		}

		.price {
			display: flex;
			justify-content: space-between;

			&.mt {
				margin-top: 46rpx;
			}
		}

		.rmb {
			font-size: 24rpx;
			color: #FF3E3E;
		}

		.now_price {
			font-size: 40rpx;
			color: #FF3E3E;
			font-weight: 700;
		}

		.bottom_price {
			font-size: 24rpx;
			color: #777;
			margin-left: 6rpx;
		}

		.before_price {
			font-size: 20rpx;
			color: #999990;
			text-decoration: line-through;
		}

		.price_right {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 140rpx;
			height: 56rpx;
			border-radius: 28rpx;
			background-color: #007A69;
			background-size: contain;
			background-repeat: no-repeat;
		}

		.before_buy {
			color: #fff;
			font-size: 24rpx;
		}

		.jd {
			padding-left: 10rpx;
			height: 64rpx;
			background: url('https://i.ringzle.com/file/20240312/f54931dedf0242f88f87094a454b0464.png') no-repeat center;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			padding-right: 70px;

			&.noNum {
				background: url('https://i.ringzle.com/file/20240321/5f288be12d03489c8f736bcf01b35f5b.png') no-repeat center;
				background-size: 100% 100%;
			}

			text {
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #FE0131;
			}
		}

	}
</style>